<template>
  <div>
    <div
      class="header-abs"
      @click="back"
    >
      <button class="header-abs-back">
        <span class="iconfont">&#xe624;</span>
      </button>
    </div>
    <div
      class="header-fixed"
      :style="opacityStyle"
    >
      <div class="header-left" @click = "back()">
        <span class="iconfont icon-fanhui"></span>
      </div>
      <div class="header-title">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'CommonHeader',
    data(){
      return{
        opacityStyle:{
          opacity:0
        }
      }
    },
    methods:{
      back(){
        this.$router.go(-1)
      },
      handleScroll(){
        const top = document.documentElement.scrollTop
        // this.showAbs = false
        if(top >= 60){
            if(this.opacityStyle.opacity < 1){
              this.opacityStyle.opacity = top/120
            }
        }
        if(top<60){
          if(this.opacityStyle.opacity > 0){
            this.opacityStyle.opacity = top/120
          }
        }
      }
    },
    mounted(){
      // console.log("mounted")
    },
    activated(){
      // 在App.vue的router-view上面添加了keep-alive后，所有组件第一次初始化后，都被缓存，不再重新创建，当再次被导航到的时候，组件及其子组件只是在缓存中拉取
      // console.log("激活")
      window.addEventListener('scroll',this.handleScroll)

    },
    deactivated(){
      // 当组件不在使用时，一定要把全局的事件给注销，不然在其他组件里也一样会执行事件监听
      window.removeEventListener('scroll',this.handleScroll)
    }
  }
  // 1rem = html font-size = 50px
  // 另外设计图如果是两倍放大图，我们的像素都要除以2
  // 如果是两倍图，把font-size设置为50px，这时用rem正好是设计图大小的0.01倍
  // flex:1可以让块自动撑开
</script>
<style lang="stylus" scoped>
  .header-abs
    position absolute
    left .2rem
    top .2rem
    width .8rem
    height .8rem
    border-radius .4rem
    background rgba(0,0,0,.8)
    z-index 100
  .header-abs-back
    background none
    color:#fff
    width .8rem
    height .8rem
    line-height:0.8rem
  .header-fixed
    display: flex
    line-height: .86rem
    background: #00bcd4
    color: #fff
    position fixed
    z-index 10
    width 100%
    height 0.86rem
    top 0
    left 0
    right 0
    .header-left
      width: .64rem
      float: left
      text-align: center
      position absolute
  .header-title
    flex 1
    text-align center
    font-size 0.32rem
</style>
